<template>
  <div class="search_container">
    <form action="/">
      <van-search
        v-model="value"
        class="search"
        placeholder="请输入搜索关键词"
        @cancel="onCancel"
      />
    </form>
    <button class="button" @click="onSearch">点击搜索</button>

    <h5 class="sousuo">搜索记录<van-icon @click="remove" name="delete" /></h5>

    <van-tag
      plain
      type="primary"
      v-for="(item, index) in history"
      :key="index"
      >{{ item }}</van-tag
    >
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      value: "",
      //搜索关键字
      history: [],
      //历史
    };
  },
  mounted() {
    this.history = JSON.parse(localStorage.getItem("history")) || [];
    //  历史记录
  },
  methods: {
    onSearch() {
      this.history.unshift(this.value);
      localStorage.history = JSON.stringify(this.history);
      this.$router.push({ name: "list", query: { value: this.value } });
    },
    onCancel() {
      Toast("取消");
    },

    remove() {
      localStorage.removeItem("history");
      this.history = [];
    },
    //  删除历史记录
  },
};
</script>
<style>
</style>
